<template>
	<view
		v-if="loading"
		:style="{
			width: windowWinth + 'px',
			height: windowHeight + 'px',
			backgroundColor: bgColor,
			position: 'absolute',
			left: left + 'px',
			top: top + 'px',
			zIndex: 9998,
			overflow: 'hidden'
		}"
		@touchmove.stop.prevent
	>
		<view
			v-for="(item, index) in RectNodes"
			:key="$u.guid()"
			:class="[animation ? 'skeleton-fade' : '']"
			:style="{
				width: item.width + 'px',
				height: item.height + 'px',
				backgroundColor: elColor,
				position: 'absolute',
				left: (item.left - left) + 'px',
				top: (item.top - top) + 'px'
			}"
		/>
		<view
			v-for="(item, index) in circleNodes"
			:key="$u.guid()"
			:class="animation ? 'skeleton-fade' : ''"
			:style="{
				width: item.width + 'px',
				height: item.height + 'px',
				backgroundColor: elColor,
				borderRadius: item.width/2 + 'px',
				position: 'absolute',
				left: (item.left - left) + 'px',
				top: (item.top - top) + 'px'
			}"
		/>
		<view
			v-for="(item, index) in filletNodes"
			:key="$u.guid()"
			:class="animation ? 'skeleton-fade' : ''"
			:style="{
				width: item.width + 'px',
				height: item.height + 'px',
				backgroundColor: elColor,
				borderRadius: borderRadius + 'rpx',
				position: 'absolute',
				left: (item.left - left) + 'px',
				top: (item.top - top) + 'px'
			}"
		/>
	</view>
</template>

<script>
/**
	 * skeleton 骨架屏
	 * @description 骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。
	 * @tutorial https://www.uviewui.com/components/skeleton.html
	 * @property {String} el-color 骨架块状元素的背景颜色（默认#e5e5e5）
	 * @property {String} bg-color 骨架组件背景颜色（默认#ffffff）
	 * @property {Boolean} animation 骨架块是否显示动画效果（默认false）
	 * @property {String Number} border-radius u-skeleton-fillet类名元素，对应的骨架块的圆角大小，单位rpx（默认10）
	 * @property {Boolean} loading 是否显示骨架组件，请求完成后，将此值设置为false（默认true）
	 * @example <u-skeleton :loading="true" :animation="true"></u-skeleton>
	 */
export default {
  name: 'u-skeleton',
  props: {
    // 需要渲染的元素背景颜色，十六进制或者rgb等都可以
    elColor: {
      type: String,
      default: '#e5e5e5'
    },
    // 整个骨架屏页面的背景颜色
    bgColor: {
      type: String,
      default: '#ffffff'
    },
    // 是否显示加载动画
    animation: {
      type: Boolean,
      default: false
    },
    // 圆角值，只对类名为u-skeleton-fillet的元素生效，为数值，不带单位
    borderRadius: {
      type: [String, Number],
      default: '10'
    },
    // 是否显示骨架，true-显示，false-隐藏
    loading: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      windowWinth: 750, // 骨架屏宽度
      windowHeight: 1500, // 骨架屏高度
      filletNodes: [], // 圆角元素
      circleNodes: [], // 圆形元素
      RectNodes: [], // 矩形元素
      top: 0,
      left: 0,
    }
  },
  methods: {
    // 查询各节点的信息
    selecterQueryInfo() {
      // 获取整个父组件容器的高度，当做骨架屏的高度
      // 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
      let query = ''
      // #ifdef MP-WEIXIN

      query = uni.createSelectorQuery().in(this.$parent)
      // #endif
      // #ifndef MP-WEIXIN
      query = uni.createSelectorQuery()
      // #endif
      query.selectAll('.u-skeleton').boundingClientRect().exec((res) => {
        this.windowHeight = res[ 0 ][ 0 ].height
        this.windowWinth = res[ 0 ][ 0 ].width
        this.top = res[ 0 ][ 0 ].bottom - res[ 0 ][ 0 ].height
        this.left = res[ 0 ][ 0 ].left
      })
      // 矩形骨架元素
      this.getRectEls()
      // 圆形骨架元素
      this.getCircleEls()
      // 圆角骨架元素
      this.getFilletEls()
    },
    // 矩形元素列表
    getRectEls() {
      let query = ''
      // 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
      // #ifdef MP-WEIXIN

      query = uni.createSelectorQuery().in(this.$parent)
      // #endif
      // #ifndef MP-WEIXIN
      query = uni.createSelectorQuery()
      // #endif
      query.selectAll('.u-skeleton-rect').boundingClientRect().exec((res) => {
        this.RectNodes = res[ 0 ]
      })
    },
    // 圆角元素列表
    getFilletEls() {
      let query = ''
      // 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
      // #ifdef MP-WEIXIN

      query = uni.createSelectorQuery().in(this.$parent)
      // #endif
      // #ifndef MP-WEIXIN
      query = uni.createSelectorQuery()
      // #endif
      query.selectAll('.u-skeleton-fillet').boundingClientRect().exec((res) => {
        this.filletNodes = res[ 0 ]
      })
    },
    // 圆形元素列表
    getCircleEls() {
      let query = ''
      // 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
      // #ifdef MP-WEIXIN

      query = uni.createSelectorQuery().in(this.$parent)
      // #endif
      // #ifndef MP-WEIXIN
      query = uni.createSelectorQuery()
      // #endif
      query.selectAll('.u-skeleton-circle').boundingClientRect().exec((res) => {
        this.circleNodes = res[ 0 ]
      })
    }
  },
  // 组件被挂载
  mounted() {
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync()

    this.windowHeight = systemInfo.windowHeight
    this.windowWinth = systemInfo.windowWidth
    this.selecterQueryInfo()
  }
}
</script>

<style lang="scss" scoped>
	@import "../../libs/css/style.components.scss";

	.skeleton-fade {
		width: 100%;
		height: 100%;
		background: rgb(194, 207, 214);
		animation-duration: 1.5s;
		animation-name: blink;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
	}

	@keyframes blink {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0.4;
		}

		100% {
			opacity: 1;
		}
	}
</style>
